import {
  ProCard,
  ProFormField,
  ProFormGroup,
  ProFormList,
  ProFormSelect,
  ProFormTextArea,
} from "@ant-design/pro-components";
import { Space } from "antd";
import React from "react";
import { queryDataSource } from "../../../api";

const SqlCustom = () => {
  return (
    <ProFormList
      itemRender={({ listDom, action }, { index }) => {
        return (
          <ProCard
            bordered
            extra={action}
            style={{ marginBlockEnd: 8 }}
            title={
              <ProFormGroup>
                <div>SQL{index + 1}</div>
                <ProFormSelect
                  fieldProps={{
                    fieldNames: {
                      value: "id",
                      label: "name",
                    },
                  }}
                  request={async () => {
                    let res = await queryDataSource({});
                    return res.data;
                  }}
                  width="md"
                  name="dataSource"
                  label="数据源"
                />
                <ProFormField name="alias" label="别名" />
              </ProFormGroup>
            }
          >
            {listDom}
          </ProCard>
        );
      }}
      name="customSqls"
    >
      <ProFormTextArea width="md" />
    </ProFormList>
  );
};
export default SqlCustom;
